<template>
  <div>
    <a-drawer :title="title" :width="drawerWidth" @close="handleClose" :visible="visible" :confirmLoading="confirmLoading">
      <div
        :style="{
          width: '100%',
          border: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
        }"
      >
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="ruleForm" :model="model" :rules="rules">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户厂名称" prop="identify" hasFeedback>
              <a-input placeholder="请输入用户厂名称" v-model.trim="model.identify" />
            </a-form-model-item>

            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="版本号" prop="appVersion" hasFeedback>
              <a-input placeholder="请输入版本号" v-model.trim="model.appVersion" />
            </a-form-model-item>

            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传文件" prop="file" hasFeedback>
              <a-upload name="file" :customRequest="uploadRequest">
                <a-button><a-icon type="upload" /> 上传 </a-button>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </a-spin>
        <a-row :style="{ textAlign: 'right' }">
          <a-button :style="{ marginRight: '8px' }" @click="handleClose">
            关闭
          </a-button>
          <a-button @click="handleOk" type="primary">确定</a-button>
        </a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import api from '@/api/apiServer';

export default {
  data() {
    return {
      title: '', // 标题
      visible: false, // 状态、
      drawerWidth: 700, // 抽屉宽度
      model: {
        identify: '',
        appVersion: '',
      },
      show: true, //根据菜单类型，动态显示隐藏表单元素
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      identify: '',
      appVersion: '',
      fd: new FormData(),
    };
  },
  watch: {
    checkedKeys(val) {},
  },
  computed: {
    rules() {
      return {
        name: [{ required: true, message: '请输入菜单标题!' }],
        component: [{ required: this.show, message: '请输入前端组件!' }],
        url: [{ required: this.show, message: '请输入菜单路径!' }],
        permsType: [{ required: true, message: '请输入授权策略!' }],
        perms: [{ required: false, message: '请输入授权标识!' }, { validator: this.validatePerms }],
        identify: [{ required: true, message: "请输用户厂名称!" }],
        appVersion: [{ required: true, message: "请输版本号!" }],
      };
    },
  },
  methods: {
    beforeUpload(file, fileList) {
      return false
    },
    uploadRequest(obj) {
      // debugger;
      let { file } = obj;
      let typeReg = /^apk/;
      // if (!typeReg.test(file.type)) {
      //   this.$message.error('请上传app文件');
      //   return false;
      // }

      this.fd.append('file', file);
    },
    // 新增
    async modalAdd() {
      this.modalEdit({
        status: '1',
        permsType: '1',
        sortNo: 1.0,
        route: true,
        menuType: 0,
      });
    },
    // 编辑
    async modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      // this.$nextTick(() => {
      //   this.$refs.ruleForm.resetFields();
      // });
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    async handleOk() {
      this.fd.append('identify', this.model.identify);
      this.fd.append('appVersion', this.model.appVersion);
      const res = await api.uploadApk(this.fd);
      if (res.code !== 200) {
        this.$message.error('请上传app文件');
      } else {
        // app.findListByIdentify();
        this.$message.success('上传app文件成功');
        this.$emit("ok");
        this.visible = false;
      }
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style></style>
